<template>
	<view class="content">
		<view class="content-header">重 置 密 码</view>
		<form>
			<view class="form-item">
				<view class="form-item-input">
					<input v-if="!isLook" type="password" v-model="password" placeholder="请输入新密码" class="content-item-input"/>
					<image v-if="!isLook" :src="eye_close" class="form-item-image" @click="watchPwd"></image>
					
					<input v-if="isLook" type="text" v-model="password" placeholder="请输入新密码" class="content-item-input"/>
					<image v-if="isLook" :src="eye" class="form-item-image" @click="watchPwd"></image>
					</view>
			</view>
			<view class="form-item">
				<view class="form-item-input">
					<input v-if="!isReLook" type="password" v-model="rePwd" placeholder="请再次输入新密码" class="content-item-input"/>
					<image v-if="!isReLook" :src="eye_close" class="form-item-image" @click="watchRePwd"></image>
					
					<input v-if="isReLook" type="text" v-model="rePwd" placeholder="请再次输入新密码" class="content-item-input"/>
					<image v-if="isReLook" :src="eye" class="form-item-image" @click="watchRePwd"></image>
				</view>
			</view>
			
			<view class="content-btn">
				<button type="primary" @click="editPassword">重 置</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: '',
				rePwd: '',
				account: '',
				eye_close: '/static/images/查看密码(no).png',
				eye: '/static/images/查看密码(yes).png',
				isLook: false,
				isReLook: false,
			}
		},
		onLoad(e) {
			let account = e.account;
			this.account = account;
			
		},
		methods: {
			editPassword() {
				let that = this;
				let ruleRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
				if(that.password != that.rePwd) {
					uni.showToast({
						title: '密码输入不一致!',
						icon: 'none'
					})
				} else if(that.password == null || that.password == '') {
					uni.showToast({
						title: '请输入新密码!',
						icon: 'none'
					})
				} else if(that.rePwd == null || that.rePwd == '') {
					uni.showToast({
						title: '请再次输入新密码!',
						icon: 'none'
					})
				} else if(!ruleRegex.test(that.password) || that.password.length < 8) {
					uni.showToast({
						title: '密码长度最少8位,需包含大小写字母和数字',
						icon:'none'
					})
				} else {
					let data = {
						account: that.account,
						password: that.password 
					}
					console.log(data);
					uni.request({
						url: 'http://localhost:8080/api/editPassword',
						data: data,
						method: 'POST',
						header: {
							'Content-Type': 'application/json'
						},
						success: (res) => {
							if(res.data.data.code == 0) {
								uni.navigateTo({
									url: '/pages/login/login?account=' + that.account
								})
							}
						}
					})
				}
			},
			watchPwd(){
				let that = this;
				that.isLook = !that.isLook;
			},
			watchRePwd(){
				let that = this;
				that.isReLook = !that.isReLook;
			},
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.content-header {
		margin-top: 20%;
		font-size: 50rpx;
		margin-bottom: 10%;
	}
	
	.form-item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10% 0 10% 0;
	}
	
	.login-btn {
		margin: 5% 40% 0;
		width: 100rpx;
		height: 100rpx;
		cursor: pointer; /* 鼠标显示手型 */
	}
	
	.logo {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50% 0 0 0;
		width: 300rpx;
		height: 300rpx;
	}
	
	.form-item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10% 0 10% 0;
	}
	
	.form-item-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}
	
	.form-item-input {
		display: flex;
		box-shadow: 4rpx 4rpx 6rpx inset rgba(0, 0, 0, 0.4);
		border-radius: 20rpx;
		padding: 20rpx 0;
		margin-bottom: 5%;
	}
	
	.content-btn-reg-forget {
		box-shadow: 4rpx 4rpx 6rpx rgba(0, 0, 0, 0.4);
		display: flex;
		font-size: 28rpx;
	}
	
	.register-text {
		margin: 5% 30% 5% 5%;
		color: #b3b3b3;
	}
	
	.forget-text {
		margin: 5% 0 0 25%;
		color: #b3b3b3;
	}
	
	.content-bottom {
		margin-top: 45%;
		font-size: 10rpx;
		color: #b3b3b3;
	}
	
	.content-item-input {
		margin-left: 30rpx;
	}
</style>